import React, { useState } from 'react'

import { useSelector, useDispatch } from 'react-redux'

import { increase, decrease, whenOddIncreaseAction, delayIncreaseAction } from '../../store/slices/count_slice'

export default function Count() {

  const [addValue, setAddvalue] = useState(1)

  const { count } = useSelector(state => state.count)
  const { movieList } = useSelector(state => state.movie)

  const dispatch = useDispatch()

  const increaseBtnHandler = () => {
    dispatch(increase(addValue))
  }

  const decreaseBtnHandler = () => {
    dispatch(decrease(addValue))
  }

  const whenOddIncreaseBtnHandler = () => {
    dispatch(whenOddIncreaseAction(addValue))
  }

  const delayIncreaseBtnHandler = () => {
    dispatch(delayIncreaseAction(addValue))
  }

  return (
    <div>
      <h2>Count</h2>
      <div>
        <p>count: {count}</p>
        <select name="count的值" id="countSelect" value={addValue} onChange={(e) => {setAddvalue(+ e.target.value)}}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={increaseBtnHandler}>加</button>
        <button onClick={decreaseBtnHandler}>减</button>
        <button onClick={whenOddIncreaseBtnHandler}>偶数时加</button>
        <button onClick={delayIncreaseBtnHandler}>延迟加(防抖)</button>
        <br />
        <br />
        <p>Movie 组件中的电影数量: {movieList.length}</p>
      </div>
    </div>
  )
}
